<template>
  <div>
    <el-dropdown class="userDd">
      <div class="userDrop">
        <span class="userDrop_text"
          >{{ userName }}<i class="el-icon-caret-bottom"></i
        ></span>
        <img src="./user01.png" alt="user" />
      </div>
      <el-dropdown-menu solt="dropdown">
        <el-dropdown-item>
          <a
            href="javascript:void(0)"
            :class="{ c: language == 'ko' }"
            @click="handleChangeLanguage('ko')"
            >{{ $t("Korea") }}</a
          >
        </el-dropdown-item>
        <el-dropdown-item>
          <a
            href="javascript:void(0)"
            :class="{ c: language == 'zh' }"
            @click="handleChangeLanguage('zh')"
            >{{ $t("China") }}</a
          >
        </el-dropdown-item>
        <el-dropdown-item divided>
          <a @click="_loginOut()"
            ><i class="el-icon-switch-button"></i>{{ $t("logout") }}</a
          >
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userName", "language"])
  },
  methods: {
    _loginOut() {
      this.$store.dispatch("user/delToken");
      this.$store.dispatch("permission/delIsFindRouter");
      this.$router.push({ name: "login" });
    },
    handleChangeLanguage(value) {
      this.$store.commit("app/SET_LANGUAGE", value);
      window.location.reload();
    }
  }
};
</script>
<style lang="scss" scoped>
.c {
  color: #409eff;
}
</style>
